<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
        ul,li{
			list-style: none;
		}
        
		.scroll{
			position: relative;
			width: 830px;
			height: 130px;
			border: 10px solid #000;
			margin: 100px auto;
			overflow: hidden;
		}
        .scroll .inner{
			position: relative;
			width: 5000px;
			height: 130px;
		}
		.scroll .inner ul{
			position: absolute;
			top: 0;
			left: 0;
			height: 130px;
            list-style: none;
		}
		.scroll ul li{
			float: left;
			margin-right: 10px;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="scroll" id="scroll">
        <div class="inner" id="inner">
		    <ul id="munit">
			    <li><img src="images/0.png" alt="" /></li>
			    <li><img src="images/1.png" alt="" /></li>
                <li><img src="images/2.png" alt="" /></li>
			    <li><img src="images/3.png" alt="" /></li>
			    <li><img src="images/4.png" alt="" /></li>
			    <li><img src="images/5.png" alt="" /></li>
			    <li><img src="images/6.png" alt="" /></li>
			    <li><img src="images/7.png" alt="" /></li>
		    </ul>
        </div>
	</div>
	<script src="js/common.js"></script>
	<script>
		// 1.获取元素
		var scroll = my$("scroll");
        var inner = my$("inner");
		var munit = my$("munit");
		// 2.自己进行滚动播放
        var nowleft = 0;     
        // var back = -1470;
        // 根据ul子级撑开的宽度计算折返点
        var back = -munit.offsetWidth;
        console.log(back);
         // 增加图片
        munit.innerHTML = munit.innerHTML + munit.innerHTML;
        var timer; 
        timer = setInterval(play,10);
		// 3.鼠标移上 scroll 元素，让运动停止
        scroll. onmouseover =function() {
            clearInterval(timer);
        }

		// 4.鼠标离开 scroll 元素，让运动重新开始  
		scroll. onmouseout = function() {
           timer = setInterval(play,10);
        }
		
        
        // 定义运动函数
        function play(){
            nowleft-=2;
            // 赋值之前进行判断
            if(nowleft <= back){
                // 让其回原位置
                nowleft = 0;
            }
            munit.style.left = nowleft+"px";
        }
		
	</script>
</body>
</html>